<app-page>
	<div id="page-wrapper">
		<div class="row">
			<div class="col-lg-12">
				<h1 class="page-header">{{ 'Producers' | translate }}</h1>
			</div>
			<!-- /.col-lg-12 -->
		</div>

		<div class="row">
			<div class="col-lg-12">
				<div class="panel panel-default">
					<div class="panel-heading">
						{{ 'Producers' | translate }}
					</div>
					<!-- /.panel-heading -->
					<div class="panel-body">
						<app-loading *ngIf="!producers"></app-loading>
						<div *ngIf="producers" class="table-responsive">
							<table class="table table-striped">
								<thead>
								<tr>
									<th>{{ 'Name' | translate }}</th>
									<th style="text-align:right">{{ 'EOS' | translate }}</th>
									<th>{{ 'Blocks' | translate }}</th>
									<th>{{ 'CreatedAt' | translate }}</th>
									<th>{{ 'UpdatedAt' | translate }}</th>
								</tr>
								</thead>
								<tbody>
								<tr *ngFor="let producer of producers">
									<td><a routerLink="/accounts/{{producer.name}}">{{producer.name}}</a></td>
									<td align="right">{{producer.eos_balance}}</td>
                                    <td>{{producer.count}}</td>
									<td>{{producer.createdAt.sec * 1000 | date:'medium'}}</td>
									<td>{{producer.updatedAt.sec * 1000 | date:'medium'}}</td>
								</tr>
								</tbody>
							</table>
						</div>
						<!-- /.table-responsive -->
					</div>
					<!-- /.panel-body -->
				</div>
				<!-- /.panel -->
			</div>
		</div>

		<div class="row">
			<div class="col-lg-12">
				<div class="panel panel-default">
					<div class="panel-heading">
						{{ 'Stats' | translate }}
					</div>
					<!-- /.panel-heading -->
					<div class="panel-body">
						<app-loading *ngIf="!producers"></app-loading>
						<div class="flot-chart">
							<div class="flot-chart-content" id="flot-pie-chart"></div>
						</div>
					</div>
					<!-- /.panel-body -->
				</div>
				<!-- /.panel -->
			</div>
		</div>

		<!-- /.row -->
	</div>
	<!-- /#page-wrapper -->
</app-page>
